import { useEffect, useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import Card from './components/Card'
import styles from './index.module.scss'
import TodoItem from './components/TodoItem'
import ProgressBar from './components/ProgressBar'
import { getPlan } from '@/apis/plan'
// @ts-ignore
import * as echarts from '@/ec-canvas/echarts'

import iconList from '@/static/icons/view-list.svg'
import iconTimer from '@/static/icons/timer.svg'
import useGetCahrt from '@/hooks/useGetCahrt'

interface PlanItem {
    id: number // 计划id
    planname: string // 计划名称
    flexibility: string // 关节灵活度
    duration: string // 训练时长
    completed?: boolean // 是否完成
}

export default function Index() {
    const [planList, setPlanList] = useState<PlanItem[]>([])

    const getPlanList = async () => {
        const res = await getPlan()
        setPlanList(res.data.slice(0, 4))
    }

    const handleClickToTrain = (i) => {
        Taro.preload(planList[i])
        Taro.navigateTo({
            url: '/subPages/rehabDetail/index',
        })
    }

    useEffect(() => {
        let userInfo = Taro.getStorageSync('userInfo')
        if (!userInfo) {
            Taro.showToast({
                title: '请先登录',
                icon: 'error',
                duration: 2000,
                complete: () => {
                    Taro.redirectTo({
                        url: '/pages/login/index',
                    })
                },
            })
        } else {
            getPlanList()
        }
    }, [])

    var option = {
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: new Array(24).fill('0').map((_, i) => i + ':00'),
            axisLabel: {
                align: 'left',
                interval: 5, // 指定坐标轴标签的显示间隔
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false, // 显示刻度线
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}Min',
                verticalAlign: 'top',
            },
            splitNumber: 2,
            splitLine: {
                lineStyle: {
                    color: '#bdd1e9',
                    type: 'dashed',
                },
            },
        },
        series: [
            {
                slient: true,
                data: new Array(24)
                    .fill(0)
                    .map((_, i) => (i + 5) * Math.random()),
                type: 'bar',
                barWidth: 5,
                itemStyle: {
                    borderRadius: 20,
                    color: '#2f3e75',
                },
            },
        ],
    }
    const [ec, setChartData] = useGetCahrt(option)

    const updateChart = () => {
        setChartData(
            new Array(24).fill(0).map((_, i) => (i + 5) * Math.random())
        )
    }

    return (
        <View onClick={updateChart}>
            <View className={styles.helloText}>
                <Text>早上好！</Text>
                <Text className={styles.username}>米亚</Text>
            </View>
            <View className={styles.cardItem}>
                <Card
                    title='今日训练计划'
                    iconLeft={<Image className='icon' src={iconList} />}
                >
                    {planList.length !== 0 &&
                        planList.map((item, i) => {
                            return (
                                <TodoItem
                                    onClick={() => handleClickToTrain(i)}
                                    key={item.id}
                                    title={item.planname}
                                    duration={`${item.duration}Min`}
                                    flexibility={`0°-${item.flexibility}°`}
                                    completed={item.completed}
                                />
                            )
                        })}
                </Card>
            </View>
            <View className={styles.cardItem}>
                <Card
                    title='今日恢复情况'
                    iconLeft={<Image className='icon' src={iconTimer} />}
                >
                    <View className={styles.tips}>
                        在这一周你完美的完成了所有的康复训练，今日恢复进度为0%
                    </View>
                    <View className={styles.progressItem}>
                        <View className={styles.progressInfo}>
                            <Text className={styles.progressInfoCount}>15</Text>
                            <Text>min/day</Text>
                        </View>
                        <ProgressBar text='今日康复进程' progress={15} />
                    </View>
                    <View className={styles.progressItem}>
                        <View className={styles.progressInfo}>
                            <Text className={styles.progressInfoCount}>
                                4,645
                            </Text>
                            <Text>min/total</Text>
                        </View>
                        <ProgressBar
                            text='预计康复进度'
                            progress={50}
                            color='#ff9c89'
                        />
                    </View>
                </Card>
            </View>
            <View className={styles.cardItem}>
                <Card title='今日康复数据'>
                    <View className={styles.chartCount}>
                        <Text>15/17Min</Text>
                    </View>
                    <View style={{ height: '150rpx' }}>
                        {/* @ts-ignore */}
                        <ec-canvas
                            id='mychart-dom-bar'
                            canvas-id='mychart-bar'
                            ec={ec}
                            forceUseOldCanvas
                        />
                    </View>
                </Card>
            </View>
        </View>
    )
}
